<!--  -->
<route type="page" lang="json">
{
  "style": {
    "navigationBarTitleText": "专业解读",
    "navigationStyle": "custom"
  }
}
</route>
<template>
  <view class="expert-analysis">
    <view class="fixed-bg"></view>
    <view class="expert-analysis__header">
      <c-title title="专业解读" subtitle="专业方向、就业前景，指引职业方向"></c-title>

      <image class="img" src="@/pages-sub/static/book.png" mode="scaleToFill" />
    </view>

    <view class="expert-analysis__content">
      <!-- 一级分类 -->
      <view class="expert-analysis__content--parent">
        <text
          v-for="item in oneClassifyList"
          :key="item.id"
          :class="{ active: item.name === activeOneName }"
          @click="handleChooseOne(item)"
          >{{ item.name }}</text
        >
      </view>
      <!-- 二级分类 -->
      <view class="expert-analysis__content--child">
        <wd-collapse v-model="activeName" accordion>
          <wd-collapse-item
            v-for="item in twoClassifyList"
            :key="item.id"
            :title="item.name"
            :name="item.name"
            custom-class="custom-collapse-item"
          >
            <view class="classify-analysis" @click="toCategory(item.id)">
              <image src="@/pages-sub/static/text.png" mode="scaleToFill" />
              <text>类目就业分析</text>
              <wd-icon name="chevron-right" size="32rpx" color="#FF800E"></wd-icon>
            </view>
            <view
              class="classify-third"
              @click="toProfessional(three)"
              v-for="three in threeClassifyList"
              :key="three.id"
            >
              <text>{{ three.name }}</text>
              <wd-icon name="chevron-right" size="32rpx" color="#AAAFB3"></wd-icon>
            </view>
          </wd-collapse-item>
        </wd-collapse>
        <c-empty v-if="twoClassifyList.length === 0" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { navigateTo } from '@/utils/router';
  import { ApiGetOneMajorList, ApiGetTwoMajorList, ApiGetThreeMajorList } from '@/service/major';

  type MajorType = {
    name?: string;
    id?: number;
    code?: string;
  };

  const oneClassifyList = ref<Array<MajorType>>([]);
  const activeName = ref('');
  const activeOneName = ref('');
  const twoClassifyList = ref<Array<MajorType>>([]);
  const threeClassifyList = ref<Array<MajorType>>([]);

  const toCategory = (id: number) => {
    navigateTo('/pages-sub/expertAnalysis/categoryAnalysis', { id });
  };
  const toProfessional = (item: MajorType) => {
    navigateTo('/pages-sub/expertAnalysis/professionalAnalysis', {
      id: item.id,
      subtitle: activeOneName.value + '-' + activeName.value + '-' + item.name,
    });
  };

  const handleChooseOne = (item: MajorType) => {
    activeOneName.value = item.name || '';
    ApiGetTwoMajorList({ pid: item.id }).then(({ data }) => {
      twoClassifyList.value = data as Array<MajorType>;
    });
  };
  watch(
    () => activeName.value,
    (val) => {
      if (val) {
        const item = twoClassifyList.value.find((item) => item.name === val);
        ApiGetThreeMajorList({ pid: item.id }).then(({ data }) => {
          threeClassifyList.value = data as Array<MajorType>;
        });
      }
    },
  );

  onMounted(() => {
    ApiGetOneMajorList().then(({ data }) => {
      oneClassifyList.value = data as Array<MajorType>;
      handleChooseOne(oneClassifyList.value[0]);
    });
  });
</script>

<style lang="scss" scoped>
  .expert-analysis {
    padding: 32rpx 32rpx 68rpx;
    display: flex;
    flex-direction: column;
    height: calc(100% - var(--status-bar-height) - 88rpx);
    overflow: hidden;
    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img {
        width: 124rpx;
        height: 124rpx;
        margin-right: 38rpx;
      }
    }
    &__content {
      flex: 1 0 0;
      border-radius: 20rpx;
      border: 2rpx solid rgba(62, 70, 84, 0.05);
      margin-top: 48rpx;
      height: 100%;
      display: flex;
      overflow: hidden;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.7) 100%
      );
      &--parent {
        flex-shrink: 0;
        padding: 20rpx;
        height: 100%;
        width: 140rpx;
        overflow-y: auto;
        background: #fef8f3;
        box-shadow: inset -1rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.08);
        border-radius: 20rpx 0rpx 0rpx 20rpx;
        text {
          display: block;
          padding: 14rpx;
          text-align: center;
          color: $uni-color-title;
          font-size: 30rpx;
          &.active {
            background: linear-gradient(138deg, #fd771a 0%, #fea625 100%);
            border-radius: 8rpx;
            color: #fff;
          }
        }
        text + text {
          margin-top: 20rpx;
        }
      }
      &--child {
        flex: 1 0 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background: #fff;
        .classify-analysis {
          display: flex;
          align-items: center;
          background: #ffffff;
          box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
          border-radius: 8rpx;
          border: 1rpx solid rgba(62, 70, 84, 0.08);
          padding-right: 20rpx;
          image {
            width: 36rpx;
            height: 36rpx;
            padding: 18rpx 20rpx;
          }
          text {
            flex: 1 0 0;
            color: $uni-color-primary;
          }
        }
        .classify-third {
          display: flex;
          padding: 14rpx 20rpx 14rpx 26rpx;
          margin-top: 20rpx;
          text {
            flex: 1 0 0;
            color: $uni-color-title;
          }
        }
      }
    }
  }
  :deep(.custom-collapse-item) {
    &::after {
      display: none !important;
    }
    .wd-collapse-item__title {
      padding-left: 24rpx;
      color: $uni-color-title;
      font-size: 30rpx;
      font-weight: 400;
    }
    .wd-collapse-item__header.is-expanded {
      &::after {
        background: #fff;
      }
      .wd-collapse-item__title {
        font-weight: 600;
      }
    }

    .wd-collapse-item__body {
      background: rgba(62, 70, 84, 0.05);
      margin: 0 20rpx;
      border-radius: 8rpx;
    }
  }
</style>
